<template>
    <!-- loading 加载图标 -->
    <div class="loading-container">
        <div style="display: flex;gap: 5px;">
            <div class="loading-icon" v-for="(item,index) in text" :key="index"
            :style="{animationDelay: `${index * 0.2}s`}"
            >{{ item }}</div>
        </div>
    </div>
</template>
<script setup>
const text = ["加", "载", "中", "。", "。"];
</script>
<style scoped>
.loading-container{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.loading-icon{
    border-radius: 50%;
    animation: rotate 1s linear infinite;
}
@keyframes rotate {
    from {
        scale: 1;
    }
    50%{
        scale: 1.5;
        transform: translateY(-10px);
    }
    to {
        scale: 1;
    }
}
</style>
